import classnames from 'classnames';
import { HTMLAttributes, useContext } from 'react';
import { Severity } from '../../constant/Notification';
import { ThemeContext } from '../../context/ThemeContext';
import style from './Alert.module.scss';

type Props = HTMLAttributes<HTMLDivElement> & {
  severity: Severity;
};

const Alert = ({ severity, className, children, ...props }: Props) => {
  const { IcNoticeClear, IcNoticeWarning, IcNoticeError } = useContext(ThemeContext).image;
  const icons = {
    [Severity.Clear]: IcNoticeClear,
    [Severity.Warning]: IcNoticeWarning,
    [Severity.Error]: IcNoticeError,
  };

  return (
    <div
      className={classnames(className, style.self, {
        [style.clear]: severity === Severity.Clear,
        [style.warning]: severity === Severity.Warning,
        [style.error]: severity === Severity.Error,
      })}
      {...props}
    >
      <img className={style.icon} src={icons[severity]} />
      <p className={style.message}>{children}</p>
    </div>
  );
};

export default Alert;
